/**
 *
 * Tughluq network technoloties
 * yeganaaa@163.com
 * 2019-06-13
 *
 */

import 'dart:ui';

import 'package:flutter/material.dart';




class MainPage extends StatefulWidget {
  @override
  State createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  PageController _pageController;

  @override
  void initState() {
    _pageController = PageController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var images = [
      "https://cdn.pixabay.com/photo/2017/07/10/20/22/abstract-background-2491412_960_720.jpg",
      "https://cdn.pixabay.com/photo/2014/04/10/11/24/red-rose-320868_960_720.jpg"
    ];

    var backgrounds = <Widget>[];

    for (var index = 0; index < images.length; index++) {
      var image = images[index];

      backgrounds.add(AnimatedBuilder(
        builder: (context, child) {
          var page = 0.0;
          if (_pageController.positions.isNotEmpty) page = _pageController.page;

          var opacity = 0.0;
          if (index > page) opacity = index - page;
          if (page > index) opacity = page - index;
          if (opacity > 1.0) opacity = 1.0;
          if (opacity < 0.0) opacity = 0.0;

          return Opacity(
            opacity: opacity,
            child: child,
          );
        },
        animation: _pageController,
        child: Image.network(
          image,
          width: double.infinity,
          height: double.infinity,
          fit: BoxFit.cover,
        ),
      ));
    }

    var textColor = Colors.white.withOpacity(0.6);

    var defaultDecoration = InputDecoration(
      filled: true,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
        borderSide: BorderSide.none,
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
        borderSide: BorderSide.none,
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15.0),
        borderSide: BorderSide(color: Colors.red.withOpacity(0.8)),
      ),
      fillColor: Colors.white.withOpacity(0.1),
      contentPadding: EdgeInsets.all(0.0),
    );

    var defaultTextStyle = TextStyle(color: textColor);

    return Scaffold(
      body: Stack(children: [
        ...backgrounds,
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
          child: Container(color: Colors.transparent,),
        ),
        Positioned(
          top: 0.0,
          bottom: 0.0,
          left: 0.0,
          right: 0.0,
          child: Center(
            child: Stack(
              children: <Widget>[
                ClipRRect(
                    borderRadius: BorderRadius.circular(30.0),
                    child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaY: 25.0, sigmaX: 25.0),
                        child: AnimatedBuilder(
                          animation: _pageController,
                          builder: (context, _) {
                            var page = 0.0;
                            if (_pageController.positions.isNotEmpty) page = _pageController.page;

                            Widget content = DefaultTextStyle(
                              style: Theme.of(context).textTheme.body2.copyWith(color: textColor),
                              child: Column(
                                children: <Widget>[
                                  Expanded(
                                    child: Stack(
                                      children: <Widget>[
                                        PageView(
                                          controller: _pageController,
                                          children: <Widget>[
                                            Column(
                                              children: <Widget>[
                                                TextField(
                                                  decoration: defaultDecoration.copyWith(
                                                      prefixIcon: Icon(Icons.people, color: textColor,),
                                                      hintText: "ئەزالىق نامىڭىز",
                                                      hintStyle: TextStyle(color: Colors.white.withOpacity(0.2))
                                                  ),
                                                  style: defaultTextStyle,
                                                ),
                                                SizedBox(height: 20.0,),
                                                TextField(
                                                  decoration: defaultDecoration.copyWith(
                                                      prefixIcon: Icon(Icons.lock, color: textColor,),
                                                      hintText: "پارولىڭىز",
                                                      hintStyle: TextStyle(color: Colors.white.withOpacity(0.2))
                                                  ),
                                                  obscureText: true,
                                                  style: defaultTextStyle,
                                                ),
                                                SizedBox(
                                                    height: 60.0
                                                ),
                                                Text("ياكى"),
                                                Text("پارولنى ئۇنۇتتىڭىزمۇ؟", style: TextStyle(decoration: TextDecoration.underline),),
                                              ],
                                            ),
                                            Column(
                                              children: <Widget>[
                                                TextField(
                                                  decoration: defaultDecoration.copyWith(
                                                      prefixIcon: Icon(Icons.people, color: textColor,),
                                                      hintText: "ئەزالىق نامىڭىز",
                                                      hintStyle: TextStyle(color: Colors.white.withOpacity(0.2))
                                                  ),
                                                  style: defaultTextStyle,
                                                ),
                                                SizedBox(height: 20.0,),
                                                TextField(
                                                  decoration: defaultDecoration.copyWith(
                                                      prefixIcon: Icon(Icons.lock, color: textColor,),
                                                      hintText: "پارولىڭىز",
                                                      hintStyle: TextStyle(color: Colors.white.withOpacity(0.2))
                                                  ),
                                                  obscureText: true,
                                                  style: defaultTextStyle,
                                                ),
                                                SizedBox(height: 20.0,),
                                                TextField(
                                                  decoration: defaultDecoration.copyWith(
                                                      prefixIcon: Icon(Icons.lock, color: textColor,),
                                                      hintText: "يەنە بىر قىتىم",
                                                      hintStyle: TextStyle(color: Colors.white.withOpacity(0.2))
                                                  ),
                                                  obscureText: true,
                                                  style: defaultTextStyle,
                                                ),
                                                SizedBox(height: 60.0 * page,),

                                                Text("ياكى"),
                                                Text("ھىساباتىڭىز بارمۇ؟", style: TextStyle(decoration: TextDecoration.underline),),
                                              ],
                                            ),
                                          ],
                                        ),
                                        Center(
                                          child: Transform.translate(
                                            offset: Offset(0.0, 40.0 + (page * 30)),
                                            child: FlatButton(
                                              color: Color.lerp(Colors.deepOrange, Colors.deepPurple, page),
                                              child: Text(page == 0 ? "كىرىڭ" : "تىزىملىتىڭ", style: defaultTextStyle,),
                                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
                                              onPressed: () {
                                                if (page > 0) _pageController.animateToPage(0, duration: Duration(milliseconds: 700), curve: Curves.easeOutCirc);
                                                else _pageController.animateToPage(1, duration: Duration(milliseconds: 700), curve: Curves.easeOutCirc);
                                              },
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            );

                            Widget buildingWidget = Container(
                              width: 280.0,
                              height: 340.0 + (page * 70.0),
                              color: Colors.white.withOpacity(0.1),
                              padding: EdgeInsets.only(top: 60.0 + 60.0, left: 30.0, right: 30.0),
                              child: content,
                            );
                            return buildingWidget;
                          },
                        ),
                    )
                ),
                Positioned(
                    top: 0.0,
                    left: 0.0,
                    right: 0.0,
                    child: Transform.translate(
                      offset: Offset(0.0, -60.0),
                      child: Column(
                        children: <Widget>[
                          CircleAvatar(
                            radius: 60.0,
                            backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2016/10/07/08/56/beauty-1721060_960_720.jpg"),
                          )
                        ],
                      ),
                    ))
              ],
            ),
          ),
        ),
      ]),
    );
  }
}
